<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示和隐藏方法</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
</head>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="sh">显示/隐藏</button>
    <button id="down">下拉显示</button>
    <button id="up">上拉隐藏</button>
    <button id="du">下拉显示/上拉隐藏</button>
    <button id="in">淡入显示</button>
    <button id="out">淡出隐藏</button>
    <button id="io">淡入显示/淡出隐藏</button>

    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        // show()方法显示，hide()方法隐藏。内部其实就是对 style.display 属性进行设置
        $('#show').click(function(){
            // $('#box').show()
            // show()方法可以传参数，fast(快速),slow(慢速),normal(正常速度)
            // $('#box').show('fast')
            // $('#box').show('slow')
            // $('#box').show('normal')
            //show()方法的参数，也可以是指定的毫秒数
            //show()方法的第二个参数，是完全显示后的回调函数。
            $('#box').show(1000,function(){
                console.log('完全显示后的回调函数');
            })
        })
        $('#hide').click(function(){
            // $('#box').hide()
            $('#box').hide(1000,function(){
                console.log('完全隐藏后的回调函数');
            })
        })
        $('#sh').click(function(){
            //注意：css()方法，传两个参数是对指定的样式赋值，只传一个参数是获取指定的样式值
            // if($('#box').css('display')==='none'){
            //     $('#box').show()
            // }else{
            //     $('#box').hide()
            // }

            // toggle()方法的内部，其实就是上面写的判断
            $('#box').toggle(500)
        })
        //slideDown()方法，是下拉显示
        //slideUp()方法，是上拉隐藏
        //slideToggle()方法，内部是对 下拉显示 和 上拉隐藏 的封装
        $('#down').click(function(){
            $('#box').slideDown()
        })
        $('#up').click(function(){
            $('#box').slideUp()
        })
        $('#du').click(function(){
            $('#box').slideToggle()
        })
        //fadeIn()是淡入 fadeOut()是淡出
        //fadeToggle() 实现淡入和淡出切换
        $('#in').click(function(){
            $('#box').fadeIn(1000)
        })
        $('#out').click(function(){
            $('#box').fadeOut(1000)
        })
        $('#io').click(function(){
            $('#box').fadeToggle(1000)
        })
    </script>
</body>
</html>